<template>
  <!--所有可以选择的组件-->
  <div v-show="isShowAllComponents" id="allComponents" class="all-grouped all-can-use-components">
    <el-collapse v-model="activeName" style="margin-left:5px">
      <el-collapse-item title="基础组件" name="1" class="add-component-grouped">
        <div class="add-component-grouped-item_new">
          <div class="add-grouped-item-list">
            <draggable
              :list="basicComponentLists"
              :group="{ name: 'people', pull: 'clone', put: false }"
              :clone="cloneDog"
              ghost-class="ghost"
              :disabled="isDrag"
            >
              <div
                v-for="(item,index) in basicComponentLists"
                :key="index"
                class="new_list_btn"
              >
                <div v-if="!item.isHide" class="conponent_icons_con" @click="addComponent(item)">
                  <span style="font-size:22px;height:30px;line-height:30px;" :class="'iconfont' + ' ' + item.iconsClass" />
                  <div class="new_list_btn_title">{{ item.title }}</div>
                </div>
              </div>
            </draggable>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="内容组件" name="3" class="add-component-grouped">
        <div class="add-component-grouped-item_new">
          <div class="add-grouped-item-list">
            <draggable
              :list="contentComponentLists"
              :group="{ name: 'people', pull: 'clone', put: false }"
              :clone="cloneDog"
              ghost-class="ghost"
              :disabled="isDrag"
            >
              <div
                v-for="(item,index) in contentComponentLists"
                :key="index"
                class="new_list_btn"
              >
                <div v-if="!item.isHide" class="conponent_icons_con" @click="addComponent(item)">
                  <span style="font-size:22px;height:30px;line-height:30px;" :class="'iconfont' + ' ' + item.iconsClass" />
                  <div class="new_list_btn_title">{{ item.title }}</div>
                </div>
              </div>
            </draggable>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>

  </div>
  <!--end 所有可以选择的组件-->
</template>
<script>
import index from './index.js'

export default index
</script>
